<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>考勤卡</title>
	<link rel="stylesheet" href="css/main.css">

	<style>
		.center {
			width: 94%;
			margin-left: 3%;
		}

		.card {
			margin-top: 20px;
			height: 130px;
			border-radius: 10px;
			position: relative;
			background: #d7dff6;
			border: 1px solid white;
		}

		.card button {
			position: absolute;
			bottom: 5px;
			right: 5px;
		}

		.card-img {
			height: 40px;
			width: 40px;
			overflow: hidden;
			border: 1px solid white;
			margin: 20px 10px;
			border-radius: 50%;
		}

		.card-info {
			height: 100px;
			width: calc(100% - 65px);
			float: right;
			margin-top: 15px;
		}

		.card div {
			height: calc((100% - 30px) / 3);
			line-height: 33px;
			margin-top: 5px;
			margin-bottom: 5px;
		}

		.info-title {
			margin-left: 15px;
			padding: 0 5px;
			width: 70px;
			float: left;
			border-radius: 5px;
			background-color: white;
			text-align: justify;
			text-align-last: justify;
		}

		.info-name {
			margin-left: 10px;
			width: calc(100% - 107px);
			float: right;
		}

		.over-title {
			background-color: tomato !important;
			color: white;
		}

		.over {
			color: tomato;
		}

		[v-for] {
			display: none;
		}
	</style>
</head>

<body>
	<div id="container">
		<div class="contain" id="vue-root">
			<div class="header">
				<div class="header_title">考勤卡</div>
				<img src="image/return.png" alt="返回" class="return" onclick="history.back()">
			</div>
			<div class="center">
				<div class="card" v-for="card in cards" :key="card.id">
					<div class="info-title">卡号</div>
					<div class="info-name" v-text="card.no"></div>
					<div class="info-title">持卡人</div>
					<div class="info-name">{{name}}{{['','老师','父亲','母亲','家长'][card.status]}}</div>
					<template v-if="card.expiryDate">
						<div class="info-title">到期时间</div>
						<div class="info-name" v-text="format(card.expiryDate)"></div>
					</template>
					<button v-if="paid&&expire(card.expiryDate)">续费</button>
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>


	<script src="/js/common.js"></script>

	<script>

		var student = getStudent();

		var app = new Vue({
			el: '#vue-root',
			data: {
				name: student.name,
				paid: false,
				cards: []
			},
			created: function () {
				axios.get('/s/card1').then(function (res) {
					this.cards = res.data;
				}.bind(this));
				axios.get('/api/school/' + student.schoolId).then(function (res) {
					this.paid = res.data.payCard;
				}.bind(this));
			},
			methods: {
				format: function (time) {
					return dayjs(time).format('YYYY-MM-DD');
				},
				expire: function (time) {
					return time && new Date().getTime() > time;
				},
				renew: function () {
					location.href = 'card_pay.html';
				}
			}
		});

	</script>

</body>

</html>